<template>
  <div>
    <div id="myChart" :style="{width: '100%', height: '300px', padding: '0 10px',boxSizing: 'border-box'}"></div>
  </div>
</template>

<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: { text: '一周销售量' },
        tooltip: {},
        xAxis: {
          data: ['2018-06-10', '2018-06-11', '2018-06-12', '2018-06-13', '2018-06-14', '2018-06-15'],
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#e3e3e3' // 坐标轴线颜色
            }
          }
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#e3e3e3' // 坐标轴线颜色
            }
          }
        },
        series: [{
          name: '销量',
          type: 'line',
          data: [5000, 5200, 4800, 4000, 6000, 6600],
          symbol: 'none'
        }]
      })
    }
  }
}
</script>

<style scoped>
</style>
